<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="header :: jscssinclude"></head>

<body>
<div th:replace="header :: header_navigation"></div>
<div class="container">
    <div class="row">
        <div class="col-sm-3" th:replace="control-menu :: control_navigation"></div>
        <div class="col-sm-9">
            <h3> <span th:text="${screenTitle}">Title</span> </h3>
            <form th:action="@{/addTask}" method="post" class="needs-validation" id="taskForm">
                <div class="form-row">
                    <div class="col-md-8 mb-3">
                        <label for="title">Task title</label>
                        <input type="text" name="title" class="form-control" id="title" placeholder="Task Title" required>
                        <div class="invalid-feedback">Please enter valid Task title</div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-8 mb-3">
                        <label for="detail">Task detail</label>
                        <textarea name="detail" class="form-control" id="detail" placeholder="Task Detail" cols="50" rows="5" required></textarea>
                        <div class="invalid-feedback">Please enter valid Task Detail</div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-8 mb-3">
                        <label for="selectedUserName">Assigned To</label>
                        <input type="hidden" id="selectedUserId" name="selectedUserId">
                        <input type="text" name="selectedUserName"
                                class="form-control" id="selectedUserName" required>
                        <div class="invalid-feedback">Please select User</div>

                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#assignedToModel">
                            Choose User
                        </button>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" id="btnAddTask">Add Task</button>
            </form>
        </div>
    </div>
</div>


<div class="modal fade" id="assignedToModel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" id="close">Close</button>
                <button type="button" class="btn btn-primary" id="chooseUserBtn">Choose User</button>
            </div>
        </div>
    </div>
</div>
</div>

<script type="text/javascript">

        $(document).ready(function(){
            $("#btnAddTask").click(function(event) {
                fireFormValidation($("#taskForm"));
            });

            $('#assignedToModel').on('show.bs.modal', function (e) {
                jQuery.get('/getAllUsers', function(data, status){
			        var result=data;
                    $('#assignedToModel').find('.modal-body').html(result);
			    });
			});
			$("#chooseUserBtn").click(function(){

			    var selectedRadioNode = $("input[name='userName']:checked");
			    if(selectedRadioNode.val() === 'undefined'){
			        alert(" Please select user ..!! ");
			    }else{
			        var selectedUserId = $("input[name='userName']:checked").prev().val()
			        var selectedUser = $("input[name='userName']:checked").val();
			        $("#selectedUserName").val(selectedUser);
			        $("#selectedUserId").val(selectedUserId);
			        $('#close').trigger('click');
			    }
			});
        });

</script>

</body>

</html>